
{% extends "base.html" %}

{% block content %}


<script>
        $(document).ready(function(){
            // Pre-populated initial data at page load
            var content_data = {{ content_data }};
	     var refresh = function() {
	         $.get("{{ url_prefix }}/monitors_data", function(data) {
	             _.extend(content_data, data);
	             $('.inlinesparkline').sparkline();
	             setTimeout(refresh, 5000);
	         });
	     };	
	     setTimeout(refresh, 5000);
	
	     rivets.formatters.sparkline_data = function(time_series) {
	         result = "";
	         for (var i = 1; i < time_series.length; ++i) {
		     var y = time_series[i][1];
		     result += (y + ",");		  
	         }
	         return result;

	     };
	
             rivets.bind($("#content"), content_data);
             $(".inlinesparkline").sparkline();
         });
</script>

<!-- Page Header -->
<section class="content-header">
    <h1 style="font-weight:bold">
      Monitors
    </h1>
</section>
	
<!-- Main content -->
<section class="content text-center">
    <div class="row">
        <div class="col-md-4">
	    <div class="box text-left" style="font-size:13.4px">
                <table class="table table-bordered">
  		    <tr><td><p><span style="color:yellow; font-weight:bold">Cluster ID: </span></td><td>{mon_status.monmap.fsid}</p></td></tr>
                    <tr><td><p><span style="color:yellow; font-weight:bold">monmap modified: </span></td><td> {mon_status.monmap.modified}</p></td></tr>
		    <tr><td><p><span style="color:yellow; font-weight:bold">monmap epoch: </span></td><td> {mon_status.monmap.epoch}</p></td></tr>
                    <tr><td><p><span style="color:yellow; font-weight:bold">quorum con: </span></td><td> {mon_status.features.quorum_con}</p></td></tr>
                    <tr><td><p><span style="color:yellow; font-weight:bold">quorum mon: </span></td><td> {mon_status.features.quorum_mon}</p></td></tr>
                    <tr><td><p><span style="color:yellow; font-weight:bold">required con: </span></td><td> {mon_status.features.required_con}</p></td></tr>
                    <tr><td><p><span style="color:yellow; font-weight:bold">required mon: </span></td><td> {mon_status.features.required_mon}</p></td></tr>
		</table>
	    </div>
	</div>
        <div class="col-md-8">
	    <div class="box">
                <h3 style="color:#00bb00;font-weight:bold">IN QUORUM</h3>
	        <div class="box-body">
	            <table class="table table-bordered text-center">
	                <thead>
			    <th>Name</th>
	  		    <th>Rank</th>
			    <th>Public Addr</th>
			    <th>Open Sessions</th>
			</thead>
			<tr rv-each-mon="in_quorum" style="font-size:15px;height:80px">
			    <td style="font-weight:bold"><a rv-href="mon.url_perf">{mon.name}</a></td>
			    <td>{mon.rank}</td>
			    <td>{mon.public_addr}</td>
			    <td><span class="inlinesparkline" style="font-size:30px">{ mon.stats.num_sessions | sparkline_data }</span></td>
			</tr>
		    </table>
		</div>
	    </div>    
	</div>
    </div>
    <div class="box">
        <h3 style="color:#00bb00; font-weight:bold">NOT IN QUORUM</h3>
	<div class="box-body">
	    <table class="table table-bordered text-center">
	        <thead>
		    <th>Name</th>
		    <th>Rank</th>
		    <th>Public Addr</th>
		</thead>
		<tr rv-each-mon="out_quorum" class="font-size:15px;height:80px">
		    <td style="font-weight:bold"><a rv-href="mon.url_perf">{mon.name}</a></td>
		    <td>{mon.rank}</td>
		    <td>{mon.public_addr}</td>
		</tr>
	    </table>
	</div>
    </div>
</section>
 

{% endblock %}
